<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Label Cloud Color Test</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="../lib/jquery/plugins/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="../lib/jquery/plugins/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="../src/blog/happy.labelCloud.js"></script>
<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/slider/assets/skins/sam/slider.css&2.6.0/build/colorpicker/assets/skins/sam/colorpicker.css"> 
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&2.6.0/build/slider/slider-min.js&2.6.0/build/colorpicker/colorpicker-min.js"></script> 
<style type="text/css"> 
.label-cloud ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}
.label-cloud li {
display:inline;
line-height:1.1;
padding:0pt 5pt 0pt 0pt;
text-indent:0pt;
}
.label-cloud li span {
display:none;
}
.label-cloud a {
font-weight:bold;
text-decoration:none;
}
.label-cloud a:hover {
text-decoration:underline;
}
</style>
<script type="text/javascript">

  var _weightStyle;
  var MAX_SIZE = 25;
  var MIN_SIZE = 13;
  var MAX_COLOR = [255,74,74];
  var MIN_COLOR = [40,200,20];
  var MAX_COUNT = 100;
  var CUT = 20;
  var LABEL_COUNT = 20;
  var weight, red, green, blue, size, areas, xticks;
  
  var getData = function() {
    weight = [];
    red = [];
    green = [];
    blue = [];
    size = [];
    areas = []; 
    xticks = [];
    var count, s, r, g, b;
    for(var i=0; i<=CUT; i++) {
      if (i == 0) {
        count = 1;
      } else {
        count = Math.floor( i * MAX_COUNT / CUT );
      }
      s = _weightStyle( MIN_SIZE, MAX_SIZE, count, MAX_COUNT );
      r = _weightStyle( MIN_COLOR[0], MAX_COLOR[0], count, MAX_COUNT );
      g = _weightStyle( MIN_COLOR[1], MAX_COLOR[1], count, MAX_COUNT );
      b = _weightStyle( MIN_COLOR[2], MAX_COLOR[2], count, MAX_COUNT );
      
      xticks.push(count);
      weight.push([count,Math.log(count)/Math.log(MAX_COUNT)]);
      size.push([count,s]);
      red.push([count,r]);
      green.push([count,g]);
      blue.push([count,b]);
      if (i < CUT) {
        areas.push({x1:count, x2:Math.floor((i+1)*MAX_COUNT/CUT), color:'rgb('+r+','+g+','+b+')'});
      }
    }//end of for
  };
  
  var plotAll = function() {
    getData();
    
    $.plot($('#weightPlot'), 
      [{data:weight, label:"log(count)/log(maxcount)"}],
      {lines:{show:true}, points:{show:true}, legend:{position:"se"}
    });
    $.plot($('#sizePlot'),
      [{data:size, label:"font size"}],
      {lines:{show:true}, points:{show:true}, legend:{position:"se"}
    });
    $.plot($('#colorPlot'), [
     {data:red, label:"red", color:"rgb(255, 0, 0)"},
     {data:green, label:"green", color:"rgb(0, 255, 0)"},
     {data:blue, label:"blue", color:"rgb(0, 0, 255)"}
    ], 
     {lines:{show:true}, points:{show:true},xaxis:{ticks:xticks},grid:{coloredAreas:areas}
    });
  };
  
  var makeLabels = function(labelCount, maxCount) {
    var count, strBuilder = [];
    for(var j=labelCount; j>=0; j--) {
      if (j == 0) {
        count = 1;
      } else {
        count = Math.ceil(j*maxCount/labelCount);
      }
      strBuilder.push('<li><a>Abcdefg</a><span>(', count, ')</span></li> ');
    }
    $("#TestLabel div.widget-content ul").html(strBuilder.join(''));
  };
    
  var makeCloud = function() {
    var lc = Happy.LabelCloud;
    lc.MAX_SIZE = MAX_SIZE;
    lc.MIN_SIZE = MIN_SIZE;
    lc.MAX_COLOR = MAX_COLOR;
    lc.MIN_COLOR = MIN_COLOR;
    lc.TARGET_ID = "#TestLabel";
    lc.cloudIt(_weightStyle);
  };
  
  $(document).ready(function(){
    $("#minColor").css("background-color",'rgb('+MIN_COLOR[0]+','+MIN_COLOR[1]+','+MIN_COLOR[2]+')');
    $("#maxColor").css("background-color",'rgb('+MAX_COLOR[0]+','+MAX_COLOR[1]+','+MAX_COLOR[2]+')');
    $("#minSize").val(MIN_SIZE);
    $("#maxSize").val(MAX_SIZE);
    $("#labelCount").val(LABEL_COUNT);
    $("#maxCount").val(MAX_COUNT);
    var wf = $("#weightFn").val() || "normal";
    if (wf == "normal") {
      _weightStyle = Happy.LabelCloud.weightStyle;
    } else if (wf == "sectional") {
      _weightStyle = Happy.LabelCloud.weightStyleSectional;
    }
    
    plotAll();
    makeLabels(LABEL_COUNT, MAX_COUNT);
    makeCloud();
     
    var picker = new YAHOO.widget.ColorPicker("container", {
      showhsvcontrols: true,
      showhexcontrols: true,
      images: {
        PICKER_THUMB: "http://yui.yahooapis.com/2.6.0/build/colorpicker/assets/picker_thumb.png",
        HUE_THUMB: "http://yui.yahooapis.com/2.6.0/build/colorpicker/assets/hue_thumb.png"
      }//end of images
    });
    
    $("#getMinColor").bind("click",function(){
      MIN_COLOR[0] = parseInt($("#yui-picker-r").val());
      MIN_COLOR[1] = parseInt($("#yui-picker-g").val());
      MIN_COLOR[2] = parseInt($("#yui-picker-b").val());
      $("#minColor").css("background-color",'rgb('+MIN_COLOR[0]+','+MIN_COLOR[1]+','+MIN_COLOR[2]+')');
    });
    
    $("#getMaxColor").bind("click",function(){
      MAX_COLOR[0] = parseInt($("#yui-picker-r").val());
      MAX_COLOR[1] = parseInt($("#yui-picker-g").val());
      MAX_COLOR[2] = parseInt($("#yui-picker-b").val());
      $("#maxColor").css("background-color",'rgb('+MAX_COLOR[0]+','+MAX_COLOR[1]+','+MAX_COLOR[2]+')');
    });
    
    $("#replotColor").bind("click",function(){
      MIN_SIZE = parseInt($("#minSize").val());
      MAX_SIZE = parseInt($("#maxSize").val());
      var wf = $("#weightFn").val() || "normal";
      if (wf == "normal") {
        _weightStyle = Happy.LabelCloud.weightStyle;
      } else if (wf == "sectional") {
        _weightStyle = Happy.LabelCloud.weightStyleSectional;
      }
    
      plotAll();
      makeLabels(parseInt($("#labelCount").val()), parseInt($("#maxCount").val()));
      makeCloud();
    });
  });
</script>
<style>
div.color {
  width: 120px;
  height: 30px;
  margin: 10px;
}
</style>
</head>

<body>
<div id="weightPlot" style="width:300px;height:150px;float:left;margin-right:20px;"></div>
<div id="sizePlot" style="width:300px;height:150px;float:left"></div>
<div style="clear:both"></div>
<div id="colorPlot" style="width:600px;height:300px;"></div>
<div id="container" style="position: relative; padding: 6px; margin:10px; background-color: #eeeeee; width: 420px; height:220px;"></div>
<table cellspacing="5px" style="margin:10px;">
<tbody>
<tr>
<td><input type="button" id="getMinColor" value="Get min color" /></td><td id="minColor"></td>
<td><input type="button" id="getMaxColor" value="Get max color" /></td><td id="maxColor"></td>
<td><input type="button" id="replotColor" value="Refresh" /></td>
</tr>
<tr>
<td><label for="minSize">Min font size</label></td>
<td><input type="text" id="minSize" style="text-align:right; padding-right:2px" size="4" /></td>
<td><label for="maxSize">Max font size</label></td>
<td><input type="text" id="maxSize" style="text-align:right; padding-right:2px" size="4" /></td>
<td></td>
</tr>
<tr>
<td><label for="labelCount">Label number</label></td>
<td><input type="text" id="labelCount" style="text-align:right; padding-right:2px" size="4" /></td>
<td><label for="maxCount">Max label count</label></td>
<td><input type="text" id="maxCount" style="text-align:right; padding-right:2px" size="4" /></td>
<td></td>
</tr>
<tr>
<td><label for="weightFn">Weight</label></td>
<td colspan="4">
<select id="weightFn">
<option value="normal" selected >Normal</option>
<option value="sectional">Sectional</option>
</select>
</td>
</tr>
</tbody>
</table>
<div id="TestLabel" style="width:400px; word-wrap:break-word; overflow:hidden;">
<div class="widget-content"><ul></ul></div>
</div>
</body>
</html>
